<template>
  <div>
    <div class="provider-list">
      <div class="header">
        <div class="header-line2 flex-s">
          <el-input
            placeholder="请输入产品名称"
            v-model="params.chanpinmingcheng"
            style="width: 350px"
            size="large"
          >
            <template #append>
              <el-button
                @click="GetList"
                style="min-width: 50px"
                icon="Search"
              />
            </template>
          </el-input>
          <el-select
            v-model="params.gongyingshang"
            size="large"
            placeholder="供应商"
            style="width: 240px; margin-left: 10px"
            clearable
            @change="GetList"
          >
            <el-option
              v-for="item in company"
              :key="item.dicValue"
              :label="item.dicLabel"
              :value="item.dicValue"
            />
          </el-select>
          <el-select
            v-model="params.chanpinleixing1"
            size="large"
            placeholder="一级分类"
            :loading="loading1"
            style="width: 240px; margin-left: 10px"
            clearable
            @remove-tag="removeTag1"
            @change="select1"
          >
            <el-option
              v-for="item in type1"
              :key="item.dicValue"
              :label="item.dicLabel"
              :value="item.dicValue"
            />
          </el-select>
          <el-select
            v-model="params.chanpinleixing2"
            size="large"
            placeholder="二级分类"
            :loading="loading2"
            clearable
            style="width: 240px; margin-left: 10px"
            @visible-change="GetType2"
            @change="select2"
          >
            <el-option
              v-for="item in type2"
              :key="item.dicValue"
              :label="item.dicLabel"
              :value="item.dicValue"
            />
          </el-select>
          <el-select
            v-model="params.chanpinleixing3"
            size="large"
            placeholder="三级分类"
            clearable
            :loading="loading3"
            @visible-change="GetType3"
            style="width: 240px; margin-left: 10px"
            @change="GetList"
          >
            <el-option
              v-for="item in type3"
              :key="item.dicValue"
              :label="item.dicLabel"
              :value="item.dicValue"
            />
          </el-select>
        </div>
      </div>
      <div class="content productTable">
        <el-table
          ref="multipleTableRef"
          border
          :load="loading"
          :data="list"
          style="width: calc(100% - 20px)"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column property="cpNo" label="编号" fixed align="center" />
          <el-table-column
            property="chanpinmingcheng"
            label="商品名称"
            width="300"
            align="center"
          />
          <el-table-column
            property="chanpinleixing1"
            label="一级业务分类"
            align="center"
          />
          <el-table-column
            property="chanpinleixing2"
            label="二级业务分类"
            align="center"
          />
          <el-table-column
            property="chanpinleixing3"
            label="三级业务分类"
            align="center"
          />
          <el-table-column
            property="jiage"
            label="价格"
            width="120"
            align="center"
          />
          <el-table-column
            property="gongyingshang"
            label="供应商"
            width="300"
            align="center"
          />
          <el-table-column fixed="right" label="操作" width="80" align="center">
            <template #default="scope">
              <el-button
                v-if="check === 1"
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'detail')"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <h-page
          v-if="total"
          v-model:curr-page="params.current"
          :size="params.size"
          :total="total"
          @change="GetList"
        />
        <el-form-item class="note-button-group flex-s mt50">
          <el-button size="large" @click="$router.go(-1)">取消</el-button>
          <el-button
            class="ml50"
            size="large"
            type="primary"
            @click="onOperation({}, 'add')"
          >
            提交
          </el-button>
        </el-form-item>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetChooseProductList } from "@/api/product";
import { GetDictionary, GetDictionaryTree } from "@/api/system";
import { baseMsg } from "@/utils/utils";
import { AddProjectProduct } from "@/api/project";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      params: {
        current: Number(route.query.page) || 1,
        size: Number(route.query.size) || 10,
        chanpinmingcheng: "",
        chanpinleixing1: "",
        chanpinleixing2: "",
        chanpinleixing3: "",
        gongyingshang: "",
        xmNo: route.query.xmNo || "",
      },
      company: [],
      list: [],
      total: 0,
      loading: true,
      loading1: true,
      loading3: true,
      loading2: true,
      type1: [],
      type2: [],
      type3: [],
      check: localStorage.getItem("check"),
      form: {
        xmNo: route.query.xmNo,
        chanpin: [],
      },
    });
    // 查询供应商选择
    const GetCompany = (val) => {
      GetDictionary({ dicId: "gongyingshangpinzhuanjialeixing" }).then(
        (res) => {
          if (res.code == 4201) {
            state.company = res.data;
          }
        }
      );
    };
    // 一级分类查询
    const GetType1 = async () => {
      state.loading1 = true;
      const res = await GetDictionaryTree({
        dicModel: "gongyingshangpinzhuanjialeixing",
      });
      if (res.code == 4201) {
        state.type1 = res.data;
        state.loading1 = false;
      } else {
        state.loading1 = false;
      }
    };
    // 查询二级分类
    const GetType2 = (val) => {
      state.loading2 = true;
      state.type2 = [];
      if (state.params.chanpinleixing1) {
        GetDictionary({ dicId: state.params.chanpinleixing1 }).then((res) => {
          let obj = res;
          if (obj.code == 4201 && obj.data.length > 0) {
            obj.data.forEach((item) => {
              state.type2.push(item);
            });
          }
        });
        state.loading2 = false;
      } else {
        state.loading2 = false;
      }
    };
    // 查询三级分类
    const GetType3 = (val) => {
      state.loading3 = true;
      state.type3 = [];
      if (state.params.chanpinleixing2) {
        GetDictionary({ dicId: state.params.chanpinleixing2 }).then((res) => {
          let obj = res;
          if (obj.code == 4201 && obj.data.length > 0) {
            obj.data.forEach((item) => {
              state.type3.push(item);
            });
          }
        });
        state.loading3 = false;
      } else {
        state.loading2 = false;
      }
    };
    // 移除已选择的标签
    const select1 = () => {
      (state.params.chanpinleixing2 = ""), (state.type2 = []);
      (state.params.chanpinleixing3 = ""), (state.type3 = []);
      GetList();
    };
    const select2 = () => {
      (state.params.chanpinleixing3 = ""), (state.type3 = []);
      GetList();
    };
    const GetList = () => {
      state.loading = true;
      GetChooseProductList(state.params).then((res) => {
        if (res.code == 4201) {
          state.list = res.data.records;
          state.total = res.data.total;
        }
        state.loading = false;
      });
    };
    // 选择产品
    const handleSelectionChange = (val) => {
      state.form.chanpin = val.map((item) => {
        return item.cpNo;
      });
    };
    // 操作
    const onOperation = (params, operation) => {
      if (operation === "detail") {
        router.push({
          path: `/chanpin/detail`,
          query: {
            id: params.id,
          },
        });
      }
      if (operation === "add") {
        if (state.form.chanpin.length == 0) {
          baseMsg("请选择商品", false);
        } else {
          AddProjectProduct(state.form).then((res) => {
            if (res.code == 4202) {
              router.go(-1);
              baseMsg("添加成功");
            }
          });
        }
      }
    };
    watch(
      () => route.query,
      () => {
        state.params.current = Number(route.query.page) || 1;
        GetList();
      },
      { deep: true }
    );
    GetList();
    GetType1();
    GetCompany();
    return {
      ...toRefs(state),
      GetList,
      onOperation,
      GetType1,
      GetType2,
      GetType3,
      select1,
      GetCompany,
      select2,
      handleSelectionChange,
    };
  },
});
</script>
<style lang="scss" scoped>
.productTable {
  padding-bottom: 30px;
}
.header {
  border-bottom: 10px solid #f2f2f2;
  border-radius: 10px 10px 0 0;
}
.header-line1 {
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
}
.header-line2 {
  padding: 20px 10px;
}
.content {
  border: none !important;
  margin: 20px 10px;
  background-color: transparent !important;
}
</style>
<style lang="scss">
.productTable .el-table__header th {
  background-color: #f2f9fc !important;
}
.note-button-group {
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
